<template>
  <div>
      <h1>当前求和为：{{num}}</h1>
      <h2>放大十倍后为：{{bigNum}}</h2>
      <h2>我在{{school}}学习{{subject}}</h2>
      <select v-model.number="addNumTotal">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button @click="addNum(addNumTotal)">+</button>
      <button @click="cutNum(addNumTotal)">-</button>
      <button @click="oddAddNum(addNumTotal)">当前和为奇数再加</button>
      <button @click="waitAddNum(addNumTotal)">等一等再加</button>
  </div>
</template>

<script>
// 引入mapState用来精简computed中state数据的代码
// 引入mapGetters用来精简computed中state数据的代码
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
export default {
    data(){
    return {
      addNumTotal:1,
    }
  },
  components:{
      
  },
  methods: {
    // 程序员亲自写方法去与vuex对话
    /*
      addNum(){
      this.$store.commit('ADD',this.addNumTotal);
      },
      cutNum(){
      this.$store.commit('CUT',this.addNumTotal);
      },
      oddAddNum(){
      this.$store.dispatch('oddAdd',this.addNumTotal);
      },
      waitAddNum(){
        this.$store.dispatch('addWait',this.addNumTotal);
      }
     */
    // 通过mapMutations生成对应方法，这些方法内部有通过commit与Mutations对话的方法
    ...mapMutations({addNum:'ADD',cutNum:'CUT'}),
    // 通过mapActions生成对应方法，这些方法内部有通过dispatch与actions对话的方法
    ...mapActions({oddAddNum:'oddAdd',waitAddNum:'addWait'})
    // 他们与另外两个map不同的是他们需要传递一个实参，也就是需要改变的值，在模板中通过()传入
    
  },
  computed:{
    ...mapState(['num','school','subject']),
    ...mapGetters(['bigNum']),
  },
  mounted() {
    console.log('Count',this);
  },
}
</script>

<style scoped>
 
</style>